<template>
  <div class="je-list">
    <div :class="{ finger: isShow }">
      <Row>
        <Col :span="1" align="middle">
          <slot name="left"></slot>
        </Col>
        <Col v-if="!showTip" :span="7" align="left" @click="handleClick">
          {{ title }}&nbsp;<i v-if="show" class="fas fa-flower"></i>
        </Col>
        <Col :span="15" align="right" class="info" @click="handleClick"
          ><i>{{ info }}</i></Col
        >
        <Col :span="1" class="my-hover" align="left" @click="handleClick"
          ><i v-if="isShow" class="fas fa-caret-right"> </i
        ></Col>
      </Row>
    </div>
  </div>
</template>

<script>
  import { Row, Col } from 'ant-design-vue';
  export default {
    name: 'JeList',
    components: {
      Row,
      Col,
    },
    props: {
      showTip: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: 'web页面消息推送',
      },
      info: {
        type: String,
        default: '浏览器右下角弹出消息框',
      },
      isShow: {
        type: Boolean,
        default: false,
      },
      show: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['listClick', 'clickTitle'],
    setup(props, { emit }) {
      const handleClick = () => {
        if (!props.isShow) return;
        // 点击list跳转下一页
        emit('listClick', true);
      };
      // 点击选项
      const onClickTitle = () => {
        emit('clickTitle');
      };

      return { handleClick, onClickTitle };
    },
  };
</script>

<style lang="less" scoped>
  .je-list {
    .finger,
    .my-hover {
      &:hover {
        cursor: pointer;
      }
    }
    margin: 0 -1px -1px 0;
    width: 810px;
    height: 40px;
    background: #ffffff;
    border: 1px solid #f1f1f1;
    // border-bottom: none;
    font-size: 14px;
    color: #333333;
    line-height: 40px;
    // &
    .ant-col-7 {
      padding-left: 5px;
    }
    .ant-col-1 {
      padding-left: 10px;
    }

    .info {
      padding-right: 20px;
      color: #aaaaaa;
      font-size: 14px;
    }
    &:hover {
      background: #e2e2e2;
    }
  }
</style>
